import React, { Component } from 'react'
import Icon from '../icon/Icon'
import * as layout from '../../configs/layout'
import * as color from '../../configs/color'
import noop from 'lodash/noop'

const searchBoxStyle = {
    width: '100%',
    height: '46px',
    paddingLeft: layout.HORIZONTAL_PADDING_NARROW,
    paddingRight: layout.HORIZONTAL_PADDING_NARROW,
    backgroundColor: color.WHITE
}

const iconStyle = {
    width: '20px',
    fontSize: '14px',
    marginRight: '8px',
    color: color.SHALLOW
}

const inputGroupStyle = {
    height: '28px',
    backgroundColor: '#e8e8e8',
    borderRadius: '5px',
    paddingLeft: '10px',
    paddingRight: '10px'
}

const inputStyle = {
    fontSize: '14px',
    backgroundColor: '#e8e8e8',
    color: color.DARK
}

const buttonStyle = {
    width: '45px',
    marginLeft: '15px',
    textAlign: 'center',
    fontSize: '16px',
    color: color.HIGHLIGHT
}

const muteButtonStyle = Object.assign({}, buttonStyle, {
    color: color.LIGHT
})

let lazyValidateTimer = null

export default class SearchBox extends Component {
    constructor(props) {
        super(props)
        this.state = {
            value: props.value,
            isValid: false
        }
        this.handleSubmit = this.handleSubmit.bind(this)
        this.handleChange = this.handleChange.bind(this)
        this.validate = this.validate.bind(this)
        this.handleBlur = this.handleBlur.bind(this)
        this.lazyValidate = this.lazyValidate.bind(this)
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            value: nextProps.value
        })
    }

    handleChange(event) {
        let value = event.target.value
        if (value.length >= this.props.maxLength) {
            value = value.substr(0, this.props.maxLength)
        }
        this.setState({value: value})
    }

    handleSubmit() {
        if (!this.state.isValid) {
            return
        }
        this.props.onSubmit(this.state.value)
    }

    handleBlur() {
        this.validate()
        this.props.onComplete.call(null, this.state.value)
    }

    validate() {
        let pattern = null

        const validateRules = {
            mobile: /1[3|4|5|7|8]\d{9}/,
            text: /\S+/
        }

        const doValidate = () => {
            if (this.props.pattern) {
                pattern = this.props.pattern;
            } else if (this.props.validType) {
                pattern = validateRules[this.props.validType]
                if (!pattern) {
                    throw new Error('non such validate type: ' + this.props.validType)
                }
            }
            return pattern.test(this.state.value)
        }

        this.setState({isValid: doValidate()})
    }

    lazyValidate() {
        clearTimeout(lazyValidateTimer)
        lazyValidateTimer = setTimeout(() => {
            this.validate()
            this.props.onComplete.call(null, this.state.value)
        }, 250)
    }

    render() {
        return (
            <div className="flex-h flex-vc" style={searchBoxStyle}>
                <div className="flex1 flex-h flex-vc flex-justify" style={inputGroupStyle}>
                    <Icon style={iconStyle} iconName="magnifier"/>
                    <input className="flex1" value={this.state.value}
                           type={this.props.type}
                           onChange={this.handleChange}
                           style={inputStyle}
                           placeholder={this.props.prompt}
                           onKeyUp={this.lazyValidate}
                           onBlur={this.handleBlur}/>
                </div>
                <span onClick={this.handleSubmit} style={this.state.isValid ? buttonStyle : muteButtonStyle}>{this.props.button}</span>
            </div>
        )
    }
}

SearchBox.defaultProps = {
    validType: 'text',
    maxLength: 20,
    type: 'text',
    onComplete: noop,
    onSubmit: noop,
    prompt: '请输入关键字',
    button: '查找'
}

SearchBox.propTypes = {
    prompt: React.PropTypes.string,
    button: React.PropTypes.string
}